<template>
	<view class="orderlist" v-if="item!=null">
		<view class="top_nav">
			<view class="tp1">
				<view class="left">

				</view>

				<view v-if="item.status==0">
					距离派单结束还剩
				</view>
				<view v-if="item.status==1">
					恭喜您已抢单成功
				</view>
				<view v-if="item.status==2">
					抢单失败
				</view>

				<view class="right">

				</view>
			</view>
			<view class="con">
				<view class="cons">
					<wly-countdown :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)"
						:second="getDateStr(item.sy_time,3)" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view  style="display: flex;align-items: center;justify-content: center;padding-left: 20rpx;" v-if="day||hour||minute||second">
								<view class="time_model">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>

							</view>
						</template>
					</wly-countdown>
				</view>
			</view>
			<view class="bom">
				<text v-if="item.sy_time>0&item.status==0">
					定制需求 | 写手匹配 | 预计匹配于 {{item.end_time_str}}截止
				</text>
				<text v-else>
					定制需求 | 写手匹配 | 已截稿
				</text>
			</view>
		</view>

		<view class="cont">
			<view class="cont_s">
				<view class="con_top">
					<view>
						<view>
							发布时间：
						</view>

						<view>
							{{item.apply_time}}
						</view>

					</view>
					<image :src="'/images/bao.png'  | formatImgUrl" @click.stop="showReport = true" class="jubaoicon" v-if="item.status==0 || item.status==1"></image>
					
					<view class="ends ">
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2">已取消</text>
					</view>
					
				</view>

				<view class="con_nav">
					<view class="navs">
						<view class="icon">订</view>
						<view class="navs_right">
							<view class="tp">
								字数共计{{item.tran_font_num}}{{item.tran_font_word}}，

								<!-- 订单价格每{{item.tran_font_word}}{{item.tarn_price}}元 -->
								<text v-if="item.task_type==0">
									订单价格每{{item.tran_font_word}}{{item.tarn_price}}币
								</text>
								<text v-else>
									订单价格共计{{parseInt(item.money)}}币
								</text>
							</view>
							<view class="bom">截稿时间:{{item.end_time.substring(0,17)}}，类型：{{item.c_desc}}</view>
						</view>
					</view>
					<view class="navs">
						<view class="icon xie">写</view>
						<view class="navs_right">
							<view class="tp">写手等级为:【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求:{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<span>制作要求：</span>
						{{item.c_content}}
					</view>


				</view>

				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right">
						{{item.money}}
					</view>
				</view>


				<view class="bomt1" v-if="item.is_qiang==1">
					<view class="bomt_a_left">我的申请</view>
				</view>
				<view class="man_list1" v-if="item.is_qiang==1">
					<view class="left">
						<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					</view>
					<view class="man_cont">
						<view class="man_top">
							<view class="nick">
								{{userInfo.username}}
							</view>
							<view class="jibox">
								<image
									:src="$options.filters.formatImgUrl(userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+userInfo.membe_id)" class="jipic" mode=""
									v-if="userInfo&&userInfo.is_writer">
								</image>
								<image v-if="userInfo&&userInfo.user_level.is_active"
									:src="!userInfo.user_level.level?'':($options.filters.formatImgUrl(userInfo.user_level.active_day>0?userInfo.user_level.level.image:userInfo.user_level.level.hide_img))"
									class="biepic" mode="">

								</image>
							</view>
						</view>
						<view class="man_bomt">
							{{item.create_time}}
						</view>
					</view>
					<image src="../static/image/pp.png" class="pipi_sucess" v-if="item.status==1" mode=""></image>
					<view class="cnbt">
						{{item.qiang_arr.u_title}}
					</view>
					<view class="bom_img" v-if="item.qiang_arr.img">
						<image :src="items | formatImgUrl" v-for="(items,index) in item.qiang_arr.img"
							@click="$common.previewImage(items,item.qiang_arr.img)" mode=""></image>
					</view>
				</view>


			</view>
		</view>

		<view class="zhanwei"></view>
		<view class="tarb_new" v-if="item.is_qiang==0">
			<view class="tar_home">
				<view @tap.stop="no_order(item)">不感兴趣</view>
			</view>
			<view class="tar_order" @click="show1=true">
				<view>
					<view @tap.stop="apply_order(item)">申请抢单</view>
				</view>
			</view>
		</view>

		<view class="tarb_new" v-if="item.is_qiang==1">
			<view class="tar_home">
				<view>
					<view @tap.stop="tuichu_order(item)">退出抢单</view>
				</view>
			</view>
			<view class="tar_order" @click="show1=true">
				<view>
					查看申请
				</view>
			</view>
		</view>


		<!-- 左右翻动 -->
		<view v-if="show1" class="zong">
			<view class="biaoqian">
				<view class="top">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view>{{userInfo.username}}</view>
					<view>申请抢单</view>
				</view>
				<view class="tab">
					<textarea placeholder-class="c1" v-model="form.cont" placeholder="可填写任意内容供付款方查看"></textarea>
				</view>
				<view class="not_like" v-if="(item.is_qiang==1&&form.img.length>0)||item.is_qiang==0">
					<view class="tp" v-if="item.is_qiang==0">如有例文展示，请上传（选填）</view>

					<view class="imgView">
						<!-- <view v-for="(img,index) in form.img" class="imgList">
							<image :src="img | formatImgUrl" @click="$common.previewImage(img,form.img)"
								mode="aspectFill" style="width: 105rpx;height: 105rpx;"></image>
							
							<image :src="'/images/closeicon_g.png' | formatImgUrl" class="imgClose2" @click="deletePic(index)"
								mode="aspectFill" style="width: 20rpx;height: 20rpx;"></image>
						</view>

						<image :src="'/images/up.png' | formatImgUrl" mode="widthFix"
							style="width: 110rpx;height: 110rpx;" @click="onChooseImg"
							v-if="item.is_qiang==0&&form.img&&form.img.length < 4"></image> -->
							
						<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="4" width="78" height="78" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
						</u-upload>
					</view>
				</view>

				<view class="cont_t" v-if="item.is_qiang==0">
					<view class="t1" @click="qr_order()">
						<view class="tex">
							申请抢单
						</view>
					</view>
				</view>

				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>

		</view>

		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>




		<!-- 举报派单 -->
		<u-popup :show="showReport">
			<view class="mask">
				<view class="matop" @click="$go('/pages/find/report?id='+uid + '&newtype=7')" >
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="showReport = false">
					取消
				</view>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				show1: false,
				tar_index: 0,
				form: {
					img: [],
					cont: []
				},
				item: null,
				id: "",
				userInfo: this.$db.get('userInfo'),
				s: 0,
				showReport: false,
				fileList2: [],
				is_dong: ''
			}
		},
		onLoad(ops) {
			this.id = ops.id
			if (ops.s) {
				this.s = ops.s
			}
			console.log(this.id, 979797)
		},
		onShow() {
			this.get_info();
			
			this.getAccountState()
		},
		methods: {
			// 关闭弹窗
			closePop() {
				this.show1 = false
			},
			get_info() {
				var _this = this;
				this.$api.default.request('task/orderListdea', {
					id: _this.id,
				}).then((res) => {
					if (res.code) {
						_this.item = res.data
						if (res.data.is_qiang == 1) {
							_this.form.img = res.data.qiang_arr.img
							_this.form.cont = res.data.qiang_arr.u_title

						}

					}
				})
			},
			no_order(item) {
				let str = "【不感兴趣将不再显示该订单】";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否设置不感兴趣？' + str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_nolike', {
								id: item.id
							}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('操作成功');

									setTimeout(function() {

										uni.navigateBack({ //返回上一个页面
											delta: 1
										});
									}, 600);

									return;
								}
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			tuichu_order(item) {
				let str = "是否确认退出抢单";
				let _this = this;
				uni.showModal({
					confirmColor: '#45C4B0',
					content: '是否' + str,
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_apply_qx', {
								id: item.id
							}).then((res) => {
								if (res.code) {
									_this.$common.errorToShow('退出成功');

									uni.navigateBack({ //返回上一个页面
										delta: 1
									});
									return;
								}
							})
						} else if (res.cancel) {

						}
					}
				})

			},
			qr_order() {
				if (this.form.cont == "" || this.form.cont == "  ") {
					this.$common.errorToShow('抢单原因必填');
					return;
				}
				this.form.id = this.info.id;
				
				this.form.img = this.fileList2

				let str = "确认抢单";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否' + str,
					success: function(res) {
						if (res.confirm) {

							_this.$api.default.request('task/order_apply', _this.form).then((res) => {
								if (res.code) {
									_this.show1 = false;
									_this.$common.errorToShow('操作成功');
									setTimeout(function() {

										uni.navigateTo({
											url: '/task/list/my_orderlist'
										})
									}, 600);
									return;

								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 3,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_dong = res.is_dong
					}
				})
			},
			apply_order(item) {
				if(this.is_dong == 1){
					this.$common.errorToShow('您的接单权限权限已被暂时关停')
					return
				}
				
				this.info = item;
				this.form = {
					img: [],
					cont: "",
					id: ""
				}
				this.show1 = true
			},
			getDateStr(mss, type) {
				var days = parseInt(mss / 86400);
				var hours = parseInt((mss - (days * 86400)) / 3600);
				var minutes = parseInt((mss - (days * 86400) - (hours * 3600)) / 60);
				var seconds = mss - (days * 86400) - (hours * 3600) - (minutes * 60)

				if (type == 0) {
					return days;
				}
				if (type == 1) {
					return hours;
				}
				if (type == 2) {
					return minutes;
				}
				if (type == 3) {
					return seconds;
				}

			},
			array_level_arr(index) {

				var array_level = ['不限', '1-10', '11-20', '21-30', '21-30', '31-40', '41-50'];
				return array_level[index];
			},
			close() {
				this.show = false
			},

			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			onChooseImg() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 9)
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
			},
			hidePay(e) {
				console.log(e)
			},
			goPay() {

				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {

							that.$common.errorToShow('操作成功');
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800);
						})
					}
				})

			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/.wly-countdown{
		justify-content: center;
	}
	
	page {
		background: #f2f5f2;
	}

	.orderlist {

		.imgView {
			margin-left: 10px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// .imgList:nth-child(3n){
			// 	margin-right: 0;
			// }
			.imgList {
				position: relative;
				padding-bottom: 10rpx;
				margin-right: 11rpx;

				.imgClose {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
					width: 26rpx;
					padding-bottom: 2px;
					padding-left: 2px;
					padding-right: 2px;
					height: 26rpx;
					background-color: #45C4B0;
					color: #fff;
					line-height: 26rpx;
					text-align: center;
					border-radius: 100px;
				}
				
				.imgClose2 {
					position: absolute;
					top: -1px;
					right: -1px;
					z-index: 1;
				}
			}

			.imgList:not(:first-child) {
				// margin-left: 15rpx;
			}
		}

		.zhanwei {
			width: 100%;
			height: 100px;
			float: left;
		}

		background: url('../static/image/suc.png');
		background-size: 100%;
		width: 100%;
		height: 100vh;

		.zhanwei {
			width: 100%;
			height: 100px;
			float: left;
		}

		.top_nav {
			// width: 92%;
			// margin-left: 4%;

			.tp1 {
				// padding-top:12px;
				color: #fff;
				width: 100%;
				text-align: center;

				.left {
					position: relative;
					width: 30px;
					height: 2px;
					left: 20%;
					top: 10px;
					background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.00) 100%);
				}

				.right {
					position: relative;
					left: 73%;
					width: 30px;
					top: -10px;
					height: 2px;
					background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.00) 100%);
				}
			}

			.con {
				width: 100%;
				text-align: center;

				.cons {
					margin: 0 auto;
					// width: 608rpx;
					margin-top: 20rpx;

					.time_model{
						float: left;
						// width:136rpx;
						// margin-left: 20rpx;
						// height: 146rpx;
						text-align: center;
						// background: radial-gradient(50% 50% at 50% 50%, #45C4B0 0%, #45CEB9 100%);
						border-radius:0.5em; 
						color: #fff;
						box-sizing: border-box;
						// border: 1px solid ;
						// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%) 1;
						// box-shadow: 0px 0px 10px 0px #03D3B2,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
						background: url('@/static/images/border-shadow.png');
						background-size: cover;
						// padding-left: 20rpx;
						background-repeat: no-repeat;
						width:190rpx;
						height: 190rpx;
						padding-top: 20rpx;
						margin-left: -20rpx;
						
						&:first-child{
							margin-left: 0px;
						}
						view{
							padding-top: 10rpx;
							font-weight: 700;
							width: 100%;
							text-align: center;
							font-size:  70rpx;
							&:last-child{
								padding-top: 0;
								margin-top: -10rpx;
								font-size: 24rpx;
							}
						}
					}
					
					.err_time_model{
						// background: radial-gradient(50% 50% at 50% 50%, #999999 0%, #A3A7A6 100%) !important;
						// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%)  !important;
						// box-shadow: 0px 0px 10px 0px #868686,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3) !important;
						background: url('@/static/images/border-shadow2.png');
						background-size: cover;
						background-repeat: no-repeat;
					}
				}
			}

			.bom {
				margin-top: 15px;
				width: 100%;
				font-size: 12px;
				text-align: center;
				color: #fff;
			}
		}

		.cont {
			width: 92%;
			margin-left: 4%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 6px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;

			.cont_s {
				width: 90%;
				margin-left: 5%;

				.con_top {
					padding-top: 12px;
					width: 100%;
					font-size: 12px;
					float: left;
					font-weight: 400;
					color: #999;
					padding-bottom: 8px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);

					view {
						float: left;
					}

					.ends {
						float: right;
						color: #45C4B0;
						font-size: 11px;
						font-weight: 500;
						background: rgba(69, 196, 176, 0.15);
						border-radius: 4px;
						padding: 3px 6px;
					}
					
					.jubaoicon{
						float: right;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.con_nav {
				margin-top: 10px;
				width: 100%;
				float: left;

				.navs {
					.icon {
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top: 2px;
						margin-right: 5px;
					}

					.xie {
						background: #7AAAF2 !important;
					}

					.navs_right {
						.tp {
							font-size: 15px;
							width: 90%;
							overflow: hidden; //隐藏
							white-space: nowrap; //不换行
							text-overflow: ellipsis; //超出部分省略号
						}

						.bom {
							margin-left: 25px;
							width: 100%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
						}
					}
				}

				.con_bomt {
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size: 10px;
					border-radius: 0.5em;
					padding-top: 5px;

					span {
						color: #45C4B0;
					}

					overflow-wrap:break-word
				}
			}

			.bomt {
				margin-top: 12px;
				padding-bottom: 8px;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				;
				float: left;
				width: 100%;
				font-size: 15px;

				.bomt_a_left {
					float: left;
				}

				.bomt_a_right {
					float: right;
					color: #45C4B0;
					font-size: 16px;

					span {
						font-size: 12px
					}

					;
				}

				&:last-child {
					font-size: 12px;
				}
			}


			.bomt1 {
				margin-top: 12px;
				padding-bottom: 8px;

				float: left;
				width: 100%;
				font-size: 15px;

				.bomt_a_left {
					float: left;
					font-size: 12px;
				}

				.bomt_a_right {
					float: right;
					color: #45C4B0;
					font-size: 16px;

					span {
						font-size: 12px
					}

					;
				}

			}

			.man_list1 {
				width: 100%;
				float: left;
				margin-top: 3px;
				padding-bottom: 10px;

				.left {
					float: left;

					image {
						width: 40px;
						height: 40px;
						border-radius: 184px;
					}
				}

				.pipi_sucess {
					position: relative;
					left: 130rpx;
					top: -70rpx;
					width: 140rpx;
					height: 130rpx;
					transform: rotate(-15deg);
					opacity: 1;
					filter: opacity(0.5);
				}

				.man_cont {

					margin-left: 5px;
					float: left;

					.man_top {

						.nick {
							float: left;
							font-size: 27rpx;
						}

						// image{
						// 	width: 15px;
						// 	height: 15px;
						// }
						.jibox {
							float: left;
							display: flex;
							align-items: center;

							.jipic {
								width: 41px;
								height:19px;
							}

							.biepic {
								width: 41px;
								height:19px;
								margin-left: 4px;
							}
						}
					}

					.man_bomt {
						font-size: 12px;
						color: #999;
						font-weight: 500;
						float: left;
					}
				}

				.man_right {
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}

				.cnbt {
					width: 100%;
					float: left;
					font-size: 11px;
					margin-top: -10rpx;
					color: #3d3d3d;
					font-weight: 700;
				}

				.bom_img {
					width: 100%;

					image {
						margin-top: 10px;
						float: left;
						width: 60px;
						height: 60px;
						background-size: 100%;
						margin-left: 5px;
						border-radius: 0.2em;

						&:first-child {
							margin-left: 0px;
						}
					}
				}
			}

			.bomt_one {
				width: 100%;
				float: left;
				margin-top: 10px;
				height: 50px;

				view {
					width: 120px;
					height: 32px;
					line-height: 32px;
					border-radius: 0.2em;
					font-size: 13px;
					text-align: center;

					&:first-child {
						float: left;
						margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}

					&:last-child {
						float: right;
						margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}

			.man_list {
				width: 100%;
				float: left;
				margin-top: 15px;
				padding-bottom: 10px;

				.left {
					float: left;

					image {
						width: 40px;
						height: 40px;
						border-radius: 184px;
					}
				}

				.man_cont {

					margin-left: 5px;
					float: left;

					.man_top {
						image {
							width: 15px;
							height: 15px;
						}
					}

					.man_bomt {
						font-size: 13px;
						color: #999;
						font-weight: 500;
					}
				}

				.man_right {
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}
			}
		}

		.tarb_new {
			position: fixed;
			bottom: 0px;
			left: 0px;
			height: 50px;
			width: 100%;
			font-size: 12px;
			background: #fff;
			padding-top: 10px;
			font-weight: 700;

			.tar_home {
				width: 50%;
				float: left;

				view {
					width: 150px;
					height: 35px;
					line-height: 35px;
					background: rgba(216, 216, 216, 0.3);
					color: #000;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}

			.tar_order {
				width: 50%;
				float: left;

				view {
					width: 150px;
					height: 35px;
					line-height: 35px;
					background: #45C4B0;
					color: #fff;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
		}

		.zong {
			position: fixed;

			text-align: center;
			left: 5%;
			top: 15%;
			z-index: 102;
		}

		.biaoqian {
			border-radius: 0.5em;
			background: #fff;
			width: 600rpx;
			margin: 0 auto;
			margin-top: 60rpx;

			.top {
				padding-top: 70rpx;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				width: 90%;
				margin-left: 5%;

				image {
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top: -35px;
					margin: 0 auto;
					border-radius: 20em;
				}

				view {
					&:first-child {
						font-weight: 700;
						font-size: 16px;
						color: #3D3D3D;
					}

					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						color: #999;
					}
				}
			}

			.tab {
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 700;
				width: 90%;
				margin-left: 5%;
				float: left;
				text-align: center;

				textarea {
					width: 88%;
					font-weight: 500;
					background: rgba(153, 153, 153, 0.2);
					padding: 10px 10px;
					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
					height: 100px;
				}

				.c1 {
					opacity: 1;
					font-family: Source Han Sans CN;
					font-size: 10px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;

					color: #999999;
				}
			}

			.not_like {
				width: 86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color: #999;
				font-size: 27rpx;
				margin-top: 40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);

				.tp {
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}

				image {
					margin-top: 5px;
					width: 60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;

					&:first-child {
						margin-left: 0px;
					}
				}
			}

			.line {
				margin-top: 30rpx;
				width: 88%;
				margin-left: 6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}

			.cont_t {
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;

			}

			.cont_b {
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;

				.t1 {
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;

					image {
						width: 33rpx;
						;
						height: 33rpx;
						float: left;
					}

					.tex {
						float: left;
						margin-left: 10rpx;
					}
				}


			}
		}

		.cl1 {
			height: 60rpx;
			width: 60rpx;
			position: relative;
			top: 110rpx;
		}

		.zhezhao {
			height: 100vh;
			position: fixed;
			top: 0rpx;
			right: 0px;
			width: 100%;
			z-index: 101;
			background: rgba(51, 51, 51, 0.6);
		}

		.zong {
			position: fixed;
			width: 90%;
			text-align: center;
			margin: 0 auto;
			// margin-left: 5%;
			top: 15%;
			z-index: 102;
		}

		.biaoqian {

			border-radius: 0.5em;
			background: #fff;
			width: 600rpx;
			margin: 0 auto;

			.top {
				padding-top: 70rpx;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				width: 90%;
				margin-left: 5%;

				image {
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -35px;
					margin: 0 auto;
					border-radius: 20em;
				}

				view {
					&:first-child {
						font-weight: 700;
						font-size: 16px;
						color: #3D3D3D;
					}

					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						color: #999;

						font-weight: 700;
					}
				}
			}

			.tab {
				padding-top: 5rpx;
				font-size: 21rpx;
				font-weight: 700;
				width: 90%;
				margin-left: 5%;
				float: left;
				text-align: center;

				textarea {
					width: 88%;
					font-weight: 500;
					background: rgba(216, 216, 216, 0.3);
					padding: 10px 10px;


					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
					height: 100px;
				}

				.c1 {
					opacity: 1;
					font-family: Source Han Sans CN;
					font-size: 12px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}

			.not_like {
				width: 86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color: #999;
				font-size: 27rpx;
				margin-top: 40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);

				.tp {
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}

				image {
					margin-top: 5px;
					width: 60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;

					&:first-child {
						margin-left: 0px;
					}
				}
			}

			.line {
				margin-top: 30rpx;
				width: 88%;
				margin-left: 6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}

			.cont_t {
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;

			}

			.cont_b {
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;

				.t1 {
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;

					image {
						width: 33rpx;
						;
						height: 33rpx;
						float: left;
					}

					.tex {
						float: left;
						margin-left: 10rpx;
					}
				}


			}
		}

		.cl1 {
			height: 60rpx;
			width: 60rpx;
			position: relative;
			top: 110rpx;
		}

		.zhezhao {
			height: 100vh;
			position: fixed;
			top: 0rpx;
			right: 0px;
			width: 100%;
			z-index: 101;
			background: rgba(51, 51, 51, 0.6);
		}

	}
	
	// 举报弹窗
	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}
</style>